<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>做题页面</title>
    <link rel="shortcut icon" href="../static/favicon.ico"/>
    <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
    <link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"/>
    <link href="../static/css/animate.css" rel="stylesheet"/>
    <link href="../static/css/style.css?v=4.1.0" rel="stylesheet"/>
    <script src="../static/js/toastr.min.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <link href="../static/css/toastr.min.css">
<!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
</head>
<style>
    #btnInfo{
        background-color: rgb(91,192,222);
        width: 130px;
        height: 80px;
        font-size: 20px;
        display: block;
        margin: 0 auto;
    }
    .form-group{
        font-size: 15px;
    }
</style>
<body>
<h1 class="text-info" style="text-align: center"> 欢迎来到口算练习系统! </h1>
<div class="w">
    <table>
        <tbody th:if="${#lists.isEmpty(problemList)}">
        <tr>
<!--            <td colspan="7">您已经做完了所有题目！！！</td>-->
        </tr>
        </tbody>
        <p2><strong>做题时间还剩余</strong></p2><div id="time" ></div>
        <tbody th:unless="${#lists.isEmpty(problemList)}">

            <form method="post" th:action="@{/submitProblem}" th:each="problem : ${problemList}" id="frm">

                <div class="form-group">
                    <label th:for="${problem.id}" th:text="${problem.title}" class="col-md-2 control-label">1+3-10 = </label>
                    <div class="col-md-2">
                        <input placeholder="请输入您的答案" name="answer" th:id="${problem.id}">
                    </div>
                </div>
            </form>
        </tbody>
    </table>
    <button  id="btnInfo" onclick="test()">提交</button>

</div>
<script>
    function test(){

        var val = document.getElementsByTagName("input");
        var t = val.length;
        console.log(val);
        var answer = new Array();
        console.log(t);
        for (i = 0;i<t;i++){
            var k = val[i].getAttribute("id");
            var val1 = document.getElementById(k).value;
            if (val1===''){
                alert("输入不能为空")
                return;
            }
            answer.push(val1);
            console.log(val1);
        }
           // 1.12.220.100:18080
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:18080/submitProblem');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({
            answer: answer
        }));
        alert("做题完成！！");
        window.location.href = "http://localhost:18080/new";
    }
    var times = 60 * 6;//剩余时间,单位秒
    var timeDiv = document.getElementById("time");
    var timeObj = null;
    function timer(){
        if(times == 0){
            //倒计时结束，提交表单
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);

            document.getElementById("btnInfo").dispatchEvent(e);
            window.clearInterval(timeObj);
            return;
        }
        else if (times == 10*60){
            toastr.options.positionClass = 'toast-top-center';
            toastr.warning('考试还有五分钟！！！！')


        }
        else if (times == 5*60){
            toastr.options.positionClass = 'toast-top-center';
            toastr.warning('考试还有十分钟！！！！')

        }
        var t = Math.floor(times/60) +"分"+times%60+"秒"
        timeDiv.innerHTML = t;
        times --;
    }

    timeObj = window.setInterval(timer,1000);
</script>
</body>
</html>